<script setup>
import { getMyPost } from "@/api/message";
import { onMounted, ref } from "vue";
import { SUCCESS } from "@/core/constants/HttpStatus";
import { ElMessage, ElStep } from "element-plus";
import router from "@/router";

const PageSize = 5;
let currentPage = ref(1);
let orderByCommentCount = ref("desc");
let total = ref(0);
let postList = ref([]);
const handlePageChange = () => {
  fetchPost(currentPage.value);
};
const goToDetail = (id) => {
  router.push("/salon/forum/post/" + id);
};
const fetchPost = async (currentPage) => {
  try {
    const res = await getMyPost(
      orderByCommentCount.value,
      currentPage,
      PageSize
    );
    console.log(res.data);
    const { code, data, msg } = res.data;
    if (code != SUCCESS) {
      throw new Error(msg);
    }
    postList.value = data.records || [];
    total.value = Number(data.total);
  } catch (e) {
    ElMessage.error(e?.message || "获取帖子失败");
  }
};
onMounted(() => {
  fetchPost(currentPage.value);
});

//限制内容显示字数
function limit(value) {
  if (value && value.length > 142) {
    value = value.substring(0, 142) + "...";
    return value;
  } else {
    return value;
  }
}
</script>
<template>
  <!--我的帖子-->
  <div class="mypost">
    <!-- 标题 -->
    <div class="message-title">
      <span class="title">我的帖子</span>
    </div>
    <!-- 帖子列表-->
    <ul class="post-display">
      <li class="post-intro" v-for="post in postList" :key="post.id">
        <!-- 队伍信息 中部文本内容 -->
        <h3>
          <span class="post-title" @click="goToDetail(post.id)">{{
            post.title
          }}</span>
        </h3>
        <p class="post-content">
          {{ limit(post.content) }}
        </p>
        <p class="post-time">
          <span>{{ post.releaseTime }}</span>
        </p>
      </li>
      <!-- 分页组件 -->
      <div class="bottom-box">
        <el-pagination
          class="pagination"
          layout="prev, pager, next"
          :total="total"
          :current-page="currentPage"
          @current-change="handlePageChange"
        >
        </el-pagination>
      </div>
    </ul>
  </div>
</template>
<style scoped lang="less">
.mypost {
  height: auto;
  width: 70%;
  .message-title {
    font-size: 18px;
    font-weight: bolder;
    width: 88%;
    background-color: #fafafa;
    margin-left: 65px;
    text-align: left;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #f2f2f2;
    .title {
      margin-left: 15px;
    }
  }
  .post-display {
    margin-top: 10px;
    width: 88%;
    padding: 0px 10px;
    height: auto;
    background-color: #fafafa;
    margin-left: 65px;
    border-radius: 5px;
    border: 1px solid #f2f2f2;
    .post-intro {
      display: grid;
      border-bottom: 1px solid #d7d7d7;
      margin-left: 15px;
      padding: 10px 0px;
    }
  }
}
//帖子标题内容
.post-title {
  text-align: left;
  line-height: 40px;
  cursor: pointer;
  &:hover {
    text-decoration: underline;
  }
}
.post-content {
  font-size: 15px;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  min-height: 50px;
}
.post-time {
  color: #b4abaf;
  font-size: 13px;
  margin-top: 8px;
}
</style>